<script setup>
import { toRefs } from 'vue';
import {VUE_APP_STATIC_URL} from "@/config/api";
</script>

<template>
  <div class="banner">
    <swiper
      class="banner-swiper"
      :circular="true" :indicator-dots="false" :autoplay="true"
    >
      <swiper-item class="banner-item skeleton-box">
        <image class="img" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/banner3.jpg`" alt="" />
      </swiper-item>
      <swiper-item class="banner-item skeleton-box">
        <image class="img" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/banner2.jpg`" alt="" />
      </swiper-item>
      <swiper-item class="banner-item skeleton-box">
        <image class="img" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/banner1.jpg`" alt="" />
      </swiper-item>
    </swiper>
  </div>
</template>

<style scoped lang="scss">
.banner{
  // #ifdef MP-WEIXIN
  padding: 20rpx 30rpx 30rpx;
  // #endif
  // #ifdef H5
  padding: 20rpx 30rpx 30rpx;
  // #endif
  //background-image: url(https://ceresdev.zkthink.com/ui-static/zwx-static/home-banner-bg.png);
  //background-repeat: no-repeat;
  //background-size: 100% auto;
  // #ifdef MP-WEIXIN
  //background-position-y: -22rpx;
  // #endif
  // #ifdef H5
  //background-position-y: 10rpx;
  // #endif
  .banner-swiper{
    height: 400rpx;
    .banner-item{
      width: 690rpx;
      height: 400rpx;
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .banner-two{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .banner-item{
      width: 338rpx;
      height: 192rpx;
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
